<script setup lang="ts">
import { watch, ref } from 'vue';
import TxtContainer from './txt-container.vue'
import Markdown from '../Markdown.vue';
import CsvContainer from '@/components/previewFile/csv-container.vue'
import DocxContainer from '@/components/previewFile/docx-container.vue'
import CodeContainer from '@/components/previewFile/code-container.vue'
import { AssetInfo } from '@/models/asset';
import { blobToFile } from '@/utils/common.methods';

// doc-container
const props = defineProps<{ asset: AssetInfo }>()
const errorText = ref('');
const prefile = ref();
const fileEnd = ref('');
async function queryFile() {
  const { url, name } = props.asset
  fetch(url)
    .then(response => response.blob())
    .then(blob => {
      const file = blobToFile(blob, name)
      goPreView(file)
    });
}


function goPreView(file) {
  try {
    const fileName = file?.name;
    fileEnd.value = fileName?.slice(fileName.lastIndexOf(".")).toLowerCase(); // 获取文件扩展名
    if (['.txt', '.csv', '.html', '.doc', '.docx', '.py', '.ts', '.js', '.cs', '.cpp'].includes(fileEnd.value)) {
      prefile.value = file;
    } else if (fileEnd.value === '.md') {
      const reader = new FileReader();
      reader.readAsText(file);
      reader.onload = () => {
        prefile.value = reader.result
      }
    } else if (['.pdf'].includes(fileEnd.value)) {
      const url = URL.createObjectURL(file);
      prefile.value = url;
    } else {
      errorText.value = '只能预览 .md,.pdf,.txt,.doc,.docx,.csv,.html,.py,.ts,.js,.cs,.cpp 格式的文件';
    }
  } catch (error) {
    errorText.value = error;
  }
}

watch(() => [props.asset], () => {
  if (props.asset) {
    queryFile()
  }
}, { deep: true, immediate: true })

</script>

<template>
  <div class="file-preview-wrapper">
    <div class="content">
      <!-- txt -->
      <TxtContainer v-if="fileEnd == '.txt'" :file="prefile" />
      <!-- md -->
      <Markdown v-else-if="fileEnd == '.md'" :source="prefile" />
      <!-- docx -->
      <DocxContainer v-else-if="fileEnd == '.docx' || fileEnd == '.doc'" :file="prefile" />
      <!-- csv -->
      <CsvContainer v-else-if="fileEnd == '.csv'" :file="prefile" :languageType="fileEnd.replace('.', '')" />
      <!-- code 源码展示 -->
      <CodeContainer v-else-if="['.html', '.cpp', '.ts', '.py', '.js', '.cs', '.cpp'].includes(fileEnd)"
        :languageType="fileEnd.replace('.', '')" :file="prefile" />
      <!-- iframe -->
      <IframeContainer v-else-if="['.pdf', '.html'].includes(fileEnd)" :file="prefile" />
      <div class="no-support-wrapper" v-else>
        <span>{{ errorText }}</span>
      </div>
    </div>
    <icon-close class="close" @click="$emit('close')" size="20" />
  </div>
</template>

<style scoped lang="scss">
.file-preview-wrapper {
  position: relative;
  padding: 30px 20px;
  height: 100%;

  .close {
    position: absolute;
    top: 6px;
    right: 6px;
    border-radius: 50%;
    padding: 2px;

    &:hover {
      background: #666;
      color: #fff;
    }
  }

  .content {
    height: 100%;
    width: 100%;
    overflow: auto;
  }

  .no-support-wrapper {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
